<template>
    <div class="header" :class="[showHeader]">
      <div class="header-back" :class="[showBack]">
          <span class="iconfont">&#xe617;</span>
      </div>
      <div class="header-search" :class="[showSearch]">
        <span class="iconfont">&#xe7e3;</span>海海昌海洋公园
      </div>
      <router-link to='/location'>
        <!-- 使用vuex中的数据 -->
        <div class="header-city" :class="[showCity]">{{this.$store.state.city}}<span class="iconfont">&#xe610;</span></div>
       </router-link>
    </div>
</template>

<script>
export default {
  name: 'homeHeader',
  //接收Home父组件传来的数据   
  props:['city'],
  data(){
    return{
      // 定义类
      showHeader:'',
      showBack:'',
      showSearch:'',
      showCity:''
    }
  },
  methods:{
      scrollChange(){
          // 获得滚动距离
          let height=document.documentElement.scrollTop
          if(height>10){
              this.showHeader='showHeader'
              this.showBack='showBack'
              this.showSearch='showSearch'
              this.showCity='showCity'
          }else{
              this.showHeader=''
              this.showBack=''
              this.showSearch=''
              this.showCity=''
          }
      }
  },
  mounted(){
      // 监听事件，监听屏幕滚动悬浮事件
      window.addEventListener('scroll',this.scrollChange)
  }
}
</script>


<style lang='stylus' scoped>
 .showHeader
    background:#fff
.header
    line-height:0.88rem
    text-align:center
    display:flex 
    .showBack
      color:#000
    .header-back
        loat:left
        width:.9rem
    .showSearch
        color:#000
    .header-search
        flex:1
        height:.6rem
        line-height:.6rem
        margin-top:.2rem
        margin-left:.2rem
        margin-right:.2rem
        border-radius:.5rem
        box-shadow:0 0 .01rem .02rem #ccc
    .showCity
        color:#aaa
        background:#eee
    .header-city
        float:right
        width:1.4rem

</style>
